<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="agcAssessment">
    <!-- <nu-col :span="24" style="height: calc(130px - 20px)"> -->
    <!-- <nutbTitle title="agc机组日调节记录"></nutbTitle> -->
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="日期" prop="checkDate" width="500px" :rules="[{ required: true, message: '时间不能为空' }]">
        <el-date-picker v-model="formData.checkDate" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" style="width: 100%" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchLine">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
        <nu-button class="searchButton" @click="exportTable">导出</nu-button>
        <nu-button class="searchButton" v-print="printOption">打印</nu-button>
      </div>
    </NuVerifyForm>
    <!-- </nu-col> -->
    <div class="line" style="margin: 18px 10px;"></div>
    <!-- <nu-col :span="24" style="width: 100%; height: calc(100% - 130px - 20px)"> -->
    <nu-row class="row" :gutter="20">
      <nu-col :span="5">
        <nuTree v-model="currentLivingObj.id" :options="treeData" :props="defaultProps" @onClickNode="handleNodeClick">
        </nuTree>
      </nu-col>
      <nu-col :span="19">
        <NuTableList :showFilter="false" :pagination="pagination" @handleSizeChange="handleSizeChange"
          @handleChangePage="handleChangePage" @handleCurrentChange="handleCurrentChange" :columns="columns"
          :dataSource="dataSource" :options="options" style="margin: 0 0 20px 0">
        </NuTableList>
        <NuTableList :showFilter="false" :columns="columnsPrint" :dataSource="dataSource" :options="optionsPrint"
          style="position: absolute;left: -5000px;z-index: -100;opacity: 0;">
        </NuTableList>
      </nu-col>
    </nu-row>
    <!-- </nu-col> -->
  </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import nuEcharts from "@/components/base/echarts";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import nuRow from "@/components/base/row.vue";
import nuTree from "@/components/base/tree";
import * as echarts from "echarts";
import axios from "axios";
import { getDateTime } from "@/utils/ruoyi";
import tableColumnsVue from '../../components/tableList/tableColumns.vue';
export default {
  name: "agcAssessment",
  components: {
    nuCol,
    nutbTitle,
    nuEcharts,
    NuVerifyForm,
    NuformItem,
    nuInput,
    nuSelect,
    nuButton,
    NuTableList,
    nuRow, nuTree
  },
  data() {
    return {
      formData: {
        checkDate: [],
      },
      fyButtons: [],
      dataSource: [],
      pagination: {
        pageSize: 20,
        total: 0,
        currentPage: 1,
        pageNum: 1
      },
      columns: [
        {
          label: "序号",
          prop: "index",
          render: (h, params) => {
            return h('span', params.index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize);
          },
        },
        {
          label: "机组名称",
          prop: "phyUnitName",
        },
        {
          label: "设点出力",
          prop: "cmdValue",
        },
        {
          label: "设点时间",
          prop: "cmdTime",
          width: '170'
        },
        {
          label: "方向",
          prop: "direction",
          render: (h, params) => {
            return h('span', params.row.direction == 1 ? '上调' : '下调');
          },
        },
        {
          label: "调节模式",
          prop: "adjustModel"
        },
        {
          label: "下发通道",
          prop: "adaptChannelName",
        },

        {
          label: "调节速率",
          prop: "adjustRate",
        },
        {
          label: "偏差量",
          prop: "energyBias",
        },
        {
          label: "响应时间",
          prop: "respTime",
        },
        {
          label: "k1",
          prop: "k1",
        },
        {
          label: "k2",
          prop: "k2",
        },
        {
          label: "k3",
          prop: "k3",
        },
        {
          label: "kp",
          prop: "kp",
        },
      ],
      options: {
        "default-expand-all": true,
        "element-loading-background": "rgba(225,239,242)",
        "element-loading-text": "数据正在加载中",
        "row-key": "pid",
        "header-cell-style": {
          background: "rgba(105, 159, 209, 0.7)",
          color: "#fff",
          fontWeight: "bold",
          fontsize: "16px",
        },
        isNoSetHeight: true,
        height: 'calc(100vh - 290px)'
        // height: '200px',
      },
      treeData: [],
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "name", // 标签显示
        children: "children", // 子级
      },
      currentLivingObj: { id: "" },
      optionsPrint: {
        'row-key': 'pid',
        height: '100vh',
        tId: 'multipleTable',
        style: 'width:1000px'
      },
      printOption: {
        id: "multipleTable",
        preview: true,
        previewTitle: "预览",
        popTitle: "",
        extraHead: "",
        extraCss: `<meta http-equiv='Content-Language' content='zh-cn'/>`
      },
    };
  },
  computed: {
    columnsPrint: function () {
      let columnsPrint = this.columns.map(item => { return { label: item.label, prop: item.prop, render: item.render, width: '76.9230' } })
      return columnsPrint
    }
  },
  created() { },
  mounted() {
    this.getTreeData();
  },
  methods: {
    /**
     * 查询
     */
    searchLine() {
      this.$refs["formData"].searchForm("form");
    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getAgcAssessmentLineData();
      }
    },
    /**
     * 类型change事件
     */
    typeChange() { },
    /**
     * 清除数据
     */
    clearParams() {
      this.resetForm("formData");
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm("form");
      for (let k in this[formName]) {
        if (
          Object.prototype.toString.call(this[formName][k]) == "[object String]"
        ) {
          this[formName][k] = "";
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Array]"
        ) {
          this[formName][k] = [];
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Number]"
        ) {
          this[formName][k] = "";
        }
      }
    },
    /**
     * 每页条数变化事件
     */
    handleSizeChange(val) {
      this.pagination.currentPage = 1;
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.getAgcAssessmentLineData();
    },
    /**
     * 改变分页触发事件
     */
    handleChangePage(val) {
      this.pagination.currentPage = val;
      this.pagination.pageNum = val;
      this.getAgcAssessmentLineData();
    },
    /**
     * 单选
     */
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    /**
     * 获取曲线数据
     */
    getAgcAssessmentLineData() {
      if (!this.currentLivingObj?.id || this.currentLivingObj.level == 3) {
        this.$message({
          type: "info",
          message: "请先选择设备",
        });
        return false;
      }

      let postData = {
        startTime: getDateTime('', this.formData.checkDate[0]),
        endTime: getDateTime('', this.formData.checkDate[1]),
        nodeName: this.currentLivingObj.name,
        bidUnitId: this.currentLivingObj.id,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.pageNum
      };
      for (let k in postData.query) {
        if (
          postData.query[k] &&
          Object.prototype.toString.call(postData.query[k]) == "[object String]"
        ) {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpGet(window.api.getCheckAgcDayAdjustDetails, postData)
        .then((res) => {
          if (res.code == 200) {
            this.dataSource = res.rows
            this.pagination.total = res.total
          } else {
            this.dataSource = [];
          }
        })
        .catch((err) => {
          this.dataSource = [];
        });
    },
    /**
     * tree节点单击
     */
    handleNodeClick(item, data) {
      this.currentLivingObj = item;
      this.currentLivingObj["level"] = data.level;
      this.pagination.currentPage = 1;
      this.pagination.pageNum = 1;
      this.searchLine()
    },
    //获取树形控件
    getTreeData() {
      let postData = {
        treeType: 1,
      };
      this.$httpGet(window.api.treeType, postData)
        .then((res) => {
          if (res.code == 200) {
            this.treeData = [res.data];
            let obj = res.data.children[0];
            this.currentLivingObj = obj;
            this.currentLivingObj["level"] = 1;
            this.getAgcAssessmentLineData();
          } else {
          }
        })
        .catch((err) => { });
    },
    /**
     * 导出
     */
    exportTable() {
      let postData = {
        startTime: getDateTime('', this.formData.checkDate[0]),
        endTime: getDateTime('', this.formData.checkDate[1]),
        nodeName: this.currentLivingObj.name,
        bidUnitId: this.currentLivingObj.id,
      };
      for (let k in postData) {
        if (!postData[k]) {
          delete postData[k]
        }
      }
      this.getDownload(window.api.checkAgcDayAdjustDetailsExportFile, {
        ...postData
      }, `agc考核日调节记录.xlsx`)
    },
  },
};
</script>
    
<style scoped lang="scss">
.agcAssessment {
  height: 100%;
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  align-items: center;
  position: relative;
}

.btnBox {
  display: flex;
  float: right;
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 10px;
}

.row {
  height: calc(100% - 90px);
  width: 100%;
}

.el-tree {
  height: calc(100% - 10px);
  padding: 10px;
  margin: 0 0 0 10px;
}

.el-tree ::v-deep {
  .el-tree-node__content {
    position: relative;
  }

  //竖线
  .el-tree-node:last-child>.el-tree-node__content::before {
    content: "";
    width: 1px;
    height: 10000px;
    border-width: 1px;
    border-left: 1px solid #52627c;
    position: absolute;
    margin-left: -9px;
    bottom: 13px;
  }

  //横线
  .el-tree-node__children .el-tree-node__content::after {
    content: "";
    width: 13px;
    height: 1px;
    border-width: 1px;
    border-top: 1px solid #52627c;
    position: absolute;
    margin-left: -9px;
  }

  .el-tree-node__content>.el-tree-node__expand-icon {
    padding: 6px 3px;
  }

  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-icon-caret-right:before {
    background: url("../../assets/images/tree_1.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  //有子节点 且已展开
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../assets/images/tree_2.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  //没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../assets/images/tree_2.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /* 点击树结构项的选中颜色 */
  .el-tree--highlight-current .is-current.el-tree-node>.el-tree-node__content {
    background-color: #99ccff !important;
  }
}
</style>
    
    